<template>
  <div class="custom-textarea">
    <div
      class="tips"
      v-if="label"
      :style="{ textAlign: labelAlign, color: labelColor }"
    >
      <slot name="left" />
      {{ label }}
    </div>
    <textarea
      placeholder-class="placeholder-input"
      :style="{
        textAlign: inputAlign,
        height: height + 'rpx',
        fontSize: fontSize + 'rpx',
      }"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      :maxlength="maxlength"
      @input="
        $emit('input', $event.detail.value);
        index = $event.detail.value.length;
      "
      name=""
      id=""
      cols="30"
      rows="10"
    >
    </textarea>
    <cover-view class="textarea-tips"
      ><span>还可输入 {{ maxlength - index }} 字</span></cover-view
    >
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {
    /* 标签配置 */
    labelAlign: String,
    labelColor: {
      type: String,
      default: '#666666',
    },
    /* 标签内容 */
    label: String,
    /* 表单字体对齐方式 */
    inputAlign: String,
    /* 占位符 */
    placeholder: String,
    /* 是否禁用 */
    disabled: Boolean,
    /* 表单默认值 */
    value: String,
    /* 表单高度(rpx) */
    height: {
      type: Number,
      default: 210,
    },
    /* 输入长度 */
    maxlength: {
      type: Number,
      default: 100,
    },
    /* 字体尺寸(rpx) */
    fontSize: {
      type: Number,
      default: 24,
    },
  },
  data: () => ({
    index: 0,
  }),
  computed: {},
  methods: {},
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
});
</script>

<style lang="scss">
.custom-textarea {
  position: relative;
  padding: 40rpx 0;
}
textarea {
  position: relative;
  width: auto;
  padding: 25rpx;
  padding-bottom: 48rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}
.placeholder-input {
  color: #9a9a9a;
}
.tips {
  width: 160rpx;
  margin-bottom: 24rpx;
}
.textarea-tips {
  position: absolute;
  font-size: 24rpx;
  right: 24rpx;
  bottom: 40+24rpx;
  span {
    color: #9a9a9a;
  }
}
</style>
